<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 父子 在谁的模板中调用 就是谁的子组件 -->
      <!-- 
        props 从外部接收数据  单向数据流 父组件数据变化 子组件会跟着更新 
        子组件只能用 不能改
      -->
      <my-list :x="10" :list="['苹果','西瓜','香蕉']"></my-list>
      <my-list :x="10" :list="arr"></my-list>
      <button @click="arr.push('火龙果')">添加</button>
    </div>
  </body>
  <script>
    // 函数 通过传参 提升复用度
    let app = Vue.createApp({
      data() {
        return {
          num: 100,
          arr: ["唱", "跳", "rap"],
        };
      },
    });
    // 组件也是vue实例  对比函数 理解组件
    // 注册组件 组件名 组件选项  可以在当前根实例下的所有vue实例模板中使用
    app.component("my-list", {
      // 类似函数的形参 用于从外部接收数据
      props: ["x", "list"],
      // 类似函数的局部变量
      // 自己的东西自己用
      data() {
        return {};
      },
      // 组件模板  相当于函数的返回值
      template: `
        <ul>
          <li v-for="item in list">{{item}}--{{x+10}}</li>  
        </ul>
      `,
      watch: {
        list: {
          deep: true,
          handler(val) {
            console.log(val);
          },
        },
      },
    });
    app = app.mount("#app");
  </script>
</html>
